<template>
  <div class="box">
    <div>V-Model Test</div>
    <br />
    <div>Child1--{{ money }}</div>
    <br />
    <div>pageNo:{{ pageNo }},pageSize:{{ pageSize }}</div>
    <br />
    <input type="text" v-model="info" />
    <br />

    <!--props:父亲给儿子数据-->
    <!--
            v-model组件身上使用
            第一：相当有给子组件传递props[mode1 Value]=10000
            第二：相当于给子组件绑定自定义事件update:modelValue 
       -->
    <!-- <Child1 :modelValue="money" @update:modelValue="handler"></Child1>    -->
    <Child1 v-model="money"></Child1>
    <hr />
    <Child2 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child2>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
//v-model指令：收集表单数据，数据双向绑定I
//v-mode1也可以实现组件之间的通信，实现父子组件数据同步的业务
const info = ref("");
const money = ref(10000);
let pageNo = ref(1);
let pageSize = ref(3);

// const handler = (num) => {
//   console.log(num);
//   money.value = num;
// };
// const handlerB = (num) => {
//   console.log("handlerB");
// };
</script>
<style scoped>
.box {
  width: 100wh;
  height: 600px;
  background-color: chartreuse;
}
</style>
